﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="pagescroll"></script>
    <script src="../scripts/common.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 20px;
        }

        #imagepanel, #imagepanel1 {
            width: 60%;
            height: 300px;
            border: 1px solid #eee;
            overflow: auto;
            display: inline-block;
        }

        #imagepanel1Inner {
            width: 200%;
        }

        img {
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div id="pagescroll">
        <div id="datapanel">
        </div>
    </div>


    <script>

        var data = [],index = 0;
        for (var i = 0; i < 100; i++) {
            data.push(i);
        }

        rayui.ready(function () {
            var pagescroll = rayui.pagescroll;

            var ins = pagescroll.render("#pagescroll", {
                down: {
                    callback: function () {
                        console.log("调用一次down");
                        index = 0;
                        $("#datapanel").html("");
                        setTimeout(function () {
                            var curCount = 10, totalCount= 100;
                            for (var i = index; i < curCount; i++, index++) {
                                $("#datapanel").append('<div style="padding:10px;">我是'+i+'</div>');
                            }
                            ins.endDown(curCount, totalCount);
                        }, 1000);
                    }
                },
                up: {
                    toTopBtn:false,
                    callback: function (page) {
                        console.log("调用一次up");
                        console.log(JSON.stringify(page))
                        setTimeout(function () {
                            var curCount = 10, totalCount = 100, count = index + curCount;
                            for (var i = index; i < count; i++, index++) {
                                $("#datapanel").append('<div style="padding:10px;">我是' + i + '</div>');
                            }
                            ins.endUp(curCount, totalCount);
                        }, 1000);
                    }
                }
            });

        });

    </script>

</body>
</html>